<template>
    <div class="notice">
        <cube-scroll @pulling-down="pullDown" @pulling-up="pullUpLoad" ref="scroll" :options="options" :data="items" >
        <div class="items">
            <div class="item" v-for="(item,index) in items" :key="index">
                <div class="con">
                    <div class="title">{{item.name}}</div>
                    <img class="img" :src="imgH+item.img" alt="">
                    <div class="body">
                        <span>
                            {{item.address}}
                        </span>
                    </div>
                </div>
                <div @click="toCard" class="more border-bottom-1px border-top-1px" >
                    <span class="txt">去报名</span>
                    <span class="iconfont iconarrow_right"></span>
                </div>
                <div class="time">
                    {{parseTime(item.time)}}
                </div>
            </div>
        </div>
        </cube-scroll>
    </div>
</template>

<script>
    import {all} from "../../api/course";
    import {parseTime} from "../../common/js/time";

    export default {
        activated(){
            this.page =1
            this.getList()
        },
        computed:{
            imgH(){
                return process.env.VUE_APP_IMG_DOMAIN
            }
        },

        methods:{
            toCard(){
              this.$router.push({
                  path:'/card'
              })
            },
            pullDown() {
                this.page = 1
                this.getList()
            },
            pullUpLoad() {
                this.getList()
            },
            parseTime(time){
              return parseTime(time)
            },
            getList() {
                all(this.page).then(res => {
                    if (this.page == 1) {//刷新
                        this.items = res.data
                        // console.log(this.orderList)

                    } else {//添加
                        this.items = this.items.concat(res.data)
                    }
                    this.page++
                })
            },
        },
        data() {
            return {
                page:1,
                options: {
                    pullDownRefresh: {
                        txt: ' ',
                        stopTime: 0
                    },
                    pullUpLoad: true,
                },
                items: []
            }
        }
    }
</script>

<style scoped lang="stylus">
    .notice
        height 100%
        background url("~@/assets/cbg.png") no-repeat
        background-size 100% auto
        padding 10px 10px 0
        .items
            font-weight 300
            .item
                border-radius 5px
                overflow hidden
                font-weight 300
                .con
                    background-color white
                    padding 0 15px
                    .title
                        color #352C0F
                        font-size 12px
                        line-height 12px
                        padding 10px 0px
                    .img
                        height 125px
                        width 100%
                        margin-bottom 10px
                    .body
                        overflow hidden
                        padding-bottom 14px
                        span
                            color #6F6F6F
                            font-size 10px
                            line-height 14px
                            overflow:hidden;
                            text-overflow:ellipsis;
                            display:-webkit-box;
                            -webkit-box-orient:vertical;
                            -webkit-line-clamp:3;
                .more
                    background-color white
                    border-color #DCDCDC
                    display flex
                    justify-content space-between
                    padding 15px 15px
                    align-items center
                    .txt
                        color #6F6F6F
                        font-size 10px
                        line-height 10px
                    .iconfont
                        font-size 10px
                        color #6F6F6F
                .time
                    color #A1A1A1
                    font-size 12px
                    line-height 12px
                    padding 15px 0
                    text-align center
</style>